<template>
	<view class="content">
		<u-row gutter="0">
			<u-col span="12">
				
				<view>
					<!-- 顶部定位组件 -->
					<mtopposition :positionMsg="positionMsg" show="true"></mtopposition>
				</view>
				
				
				<view class="box-sticky">
						<!-- 吸顶搜索框 -->
						<usticky :enable="stickyEnable" class="sticky">
							<view  h5-nav-height="0" :offset-top="0">
								<usearch placeholder-color="#BBBCC0" bg-color="#F0F1F3" placeholder="日照香炉生紫烟" v-model="search" :actionStyle="actionStyle"></usearch>
							</view>
						</usticky>
				</view>
				
				
			</u-col>
		</u-row>
		<u-row gutter="0">
			<u-col span="12">
				<utag></utag>
				
				
			</u-col>
		</u-row>
	</view>
</template>

<script>
	//自己定义的组件
	import mtopposition from "@/components/m-topposition.vue";
	//uViewUI库组件
	import usearch from "@/components/u-search.vue";
	import usticky from "@/components/u-sticky.vue";
	import utag from "@/components/u-tag.vue";
	
	export default {
		components:{
			mtopposition,
			usearch,
			usticky
		},
		data() {
			return {
				title: 'Hello',
				positionMsg:"君不见,黄河之水天上来...",
				stickyEnable:true,
				search:"",
				actionStyle:{
					"background-color":"#1DC2FC",
					"padding-top":"4px",
					"padding-bottom":"5px",
					"border-radius":"50px",
					
				},
			}
		},
		onInit(Object){},	//监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
		onLoad(Object){},	//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例		
		onShow(){},	//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面		
		onReady(){		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发	
			
		},		
		onHide(){},	//监听页面隐藏		
		onUnload(){},	//监听页面卸载		
		onResize(){},	//监听窗口尺寸变化	App、微信小程序	
		onPullDownRefresh(){	//监听用户下拉动作，一般用于下拉刷新，参考示例		
			
		},	
		onReachBottom(){},	//页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项		
		onTabItemTap(Object){},	//点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、支付宝小程序、百度小程序、H5、App（自定义组件模式）	
		onShareAppMessage(){},	//用户点击右上角分享	微信小程序、百度小程序、字节跳动小程序、支付宝小程序	
		onPageScroll(Object){		//监听页面滚动，参数为Object	nvue暂不支持	
			
			
		},	
		onNavigationBarButtonTap(Object){},	//监听原生标题栏按钮点击事件，参数为Object	App、H5	
		onBackPress(){},	//监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。	app、H5、支付宝小程序	
		onNavigationBarSearchInputChanged(){},	//监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
		onNavigationBarSearchInputConfirmed(){},	//监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
		onNavigationBarSearchInputClicked(){},	//监听原生标题栏搜索输入框点击事件	App、H5	1.6.0
		onShareTimeline(){},	//监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
		onAddToFavorites(){},	//监听用户点击右上角收藏
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		/* justify-content: center; */
	
		height: 10000rpx;
	}
	.box-sticky{
		background-color: #1DC2FC;
		
		
	}
	
	.sticky {
			width: 750rpx;
			height: 120rpx;
			border-top-left-radius: 46rpx;
			border-top-right-radius: 46rpx;
			background-color: #FFFFFF;
			color: #fff;
			padding: 24rpx;
	}



	

</style>
